/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-08-25 08:28:44
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-08-29 10:28:38
 * @FilePath: /legion-iot/src/pages/dashboard3d/components/cast/BoxA.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import React, { useState, useEffect, useRef, useMemo } from "react";

import { useFrame, useThree } from "@react-three/fiber";
import {
  OrbitControls,
  Environment,
  useGLTF,
  Box,
  Gltf,
  RoundedBox,
  Text,
} from "@react-three/drei";
import { Modal } from "antd";

function getinfo(list, curconfig) {
  let res = list?.filter?.((item, index) => {
    return item.remark === curconfig?.okey;
  })?.[0];

  return res ?? curconfig;
}

function BoxA(props) {
  let { scale, name, rotateX, rotateY, rotateZ, setIndex, theindex } = props;

  const floor_okey = theindex?.map((it) => it?.okey);

  // This reference will give us direct access to the mesh
  const lists = JSON.parse(localStorage.getItem("ALIST"));

  scale = scale ?? 0.01;

  const src = useMemo(() => {
    const val = name ?? "喷淋泵";
    return `./glb/${val}.glb`;
  }, [name]);

  return (
    <>
      <Gltf
        {...props}
        src={src}
        scale={scale}
        rotation={[rotateX ?? 0, rotateY ?? 0, rotateZ ?? 0]}
        onClick={() => {

          if (name == "消防报警主机") {
            Modal.info({
              title: "消防报警主机控制台",
              width:"96vw",
              style: {top:"12px"},
              content: (
                <div style={{  height:"80vh",width:"100%",borderRadius:12,overflow:"hidden"}}>
                  <iframe
                    style={{width:"100%",height:"100%"}}
                    src="http://221.6.68.150:9090/?row=logins"
                    frameborder="0"
                  ></iframe>
                </div>
              ),
              getContainer: () =>
                document.getElementById("conse"),
            });

            return;
          }



          const res = getinfo(lists, props);
          setIndex({
            ...res,
            name: props?.name,
            sensors: props?.sensors,
            id: res?.id || props?.defaultid,
            okey: props?.okey,
          });
        }}
        // onPointerOver={(event) => setHover(true)}
        // onPointerOut={(event) => setHover(false)}
        castShadow
        receiveShadow
        inject={
          props?.name == "摄像头" ? null : (
            <meshPhysicalMaterial
              color={floor_okey?.includes(props?.okey) ? "#13c2c2" : "grey"}
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={1} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              reflectivity={1} //光的 反射率
            />
          )
        }
      ></Gltf>
    </>
  );
}
export default BoxA;
